<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>纯CSS实现带进度条的人物卡片切换效果</title>
    <link rel="stylesheet" href="156.css">
</head>

<body>
    <div class="container">
        <input type="radio" name="select" id="slide_1" checked hidden>
        <input type="radio" name="select" id="slide_2" hidden>
        <input type="radio" name="select" id="slide_3" hidden>

        <div class="slider">
            <label for="slide_1" class="slide slide-1"></label>
            <label for="slide_2" class="slide slide-2"></label>
            <label for="slide_3" class="slide slide-3"></label>
        </div>

        <div class="card card-1">
            <div class="img">
                <img src="/images/156/1.jpg" alt="">
            </div>
            <div class="content">
                <div class="title">女帝</div>
                <div class="text">波雅·汉库克，日本漫画《航海王》及其衍生作品中的角色。人称：海贼女帝，是位于无风带女儿岛的海贼国家亚马逊·百合王国的现任皇帝，同时也是九蛇海贼团的船长，其绝世的容颜被世人评价为“世界第一美女”。</div>
                <a href="#">查看详情</a>
            </div>
        </div>
        <div class="card card-2">
            <div class="img">
                <img src="/images/156/2.jpg" alt="">
            </div>
            <div class="content">
                <div class="title">罗宾</div>
                <div class="text">妮可·罗宾，日本漫画《航海王》及其衍生作品中的角色，草帽一伙的考古学家，出生在西海的考古学之岛“奥哈拉”，年仅8岁就被悬赏千万的奥哈拉幸存者。“花花果实”能力者，能让身体的任何部位像开花一样绽放在视线范围内的任何有形体的事物上并作出攻击或其他用途。</div>
                <a href="#">查看详情</a>
            </div>
        </div>
        <div class="card card-3">
            <div class="img">
                <img src="/images/156/3.jpg" alt="">
            </div>
            <div class="content">
                <div class="title">娜美</div>
                <div class="text">娜美，日本漫画《航海王》及衍生作品中的女主角，草帽一伙的航海士，人称“小贼猫”，悬赏金6600万贝里。使用棍术，现在武器为“魔法天候棒”。头脑聪明又机灵，精通气象学和航海术，能用身体感知天气，完美指示航路，是个能精确画出航海图的天才航海士。</div>
                <a href="#">查看详情</a>
            </div>
        </div>
    </div>
</body>

</html>